<template>
    <div class="banner">
    <div @click="showswiper">
           <div class="banner-image">
            <img src="https://img1.qunarzz.com/vs_ceph_b2c_001/6e8aa1e6-09ba-46a8-beba-8415f377d406.jpg_r_1280x840x95_ede02e41.jpg" alt="">
            

        </div>
        <div class="banner-title">
            金海湖风景区（AAA景区）

        </div>
    </div>
        
        <div class="images-swiper" v-show="imageshow" @click="hideswiper">
                        <swiper :options="swiperOptions">
                <swiper-slide v-for='item in bannerlist' :key='item.id'>
                    <img :src="item.imgurl" alt="图片呢">
                </swiper-slide>
           
            </swiper>
             <div class="swiper-pagination" slot="pagination"></div>

        </div>
        
  
    </div>
</template>
<style scoped>
.banner{
    position: relative;
    background: black;
   
}
.banner-image{
    width: 100%;
    height:0;
    overflow: hidden;
    padding-bottom: 55%;
}
.banner-image img{
    width: 100%;
    
    
}
.banner-title{
    position: absolute;
    bottom: .3rem;
    left: .3rem;
    font-size: .32rem;
    color: #fff;
    
}
.images-swiper{
    background: #000;
    position: fixed;
    top: 0;
    bottom: 0;
    
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}
.images-swiper img{
    width: 100%;
}
.swiper-pagination-fraction, .swiper-pagination-custom, 
.swiper-container-horizontal > .swiper-pagination-bullets{
color: #fff;
bottom: .6rem;
left: .5rem;
font-size: .36rem;
}
</style>
<script>
export default {
    data(){
        return{
             swiperOptions:{
                 pagination: {
            el: '.swiper-pagination',
            type:'fraction'
          },
          loop:true,
          //autoplay:true
            },

            bannerlist:[{
                id:'01',
                imgurl:'https://img1.qunarzz.com/vs_ceph_b2c_001/6e8aa1e6-09ba-46a8-beba-8415f377d406.jpg_r_1280x840x95_ede02e41.jpg'
            },
            {
                id:'01',
                imgurl:'https://img1.qunarzz.com/vs_ceph_b2c_001/6e8aa1e6-09ba-46a8-beba-8415f377d406.jpg_r_1280x840x95_ede02e41.jpg'
            }
            ,{
                id:'01',
                imgurl:'https://img1.qunarzz.com/vs_ceph_b2c_001/6e8aa1e6-09ba-46a8-beba-8415f377d406.jpg_r_1280x840x95_ede02e41.jpg'
            }],
            imageshow:false
        }
    },
    methods:{
        showswiper(){
            this.imageshow=true;
        },
        hideswiper(){
            this.imageshow=false;
        }
    }
    
}
</script>